<template>
	<div class="recordedData w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{userName}}的点播课程学习数据</p>
		</div>
		<p style="margin-bottom: 20px;">课程名称：{{updateTitle}}</p>
		<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
			<el-table-column label="序号" width="60">
				<template slot-scope="scope">{{ scope.row.sort}}</template>
			</el-table-column>
			<el-table-column prop="videoName" label="课程目录"></el-table-column>
			<el-table-column label="学习时长">
				<template slot-scope="scope">{{ scope.row.completedNum}}</template>
			</el-table-column>
			<el-table-column label="学习状态">
				<template slot-scope="scope">
					<span v-if="scope.row.playper==100">已完成</span>
					<span v-if="scope.row.playper==0||scope.row.playper==null">待学习</span>
					<span v-else>学习中</span>
				</template>
			</el-table-column>
		</el-table>
		<div class="fenyeMargin">
			<div class="pag_block">
				<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total" ></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default{
		data(){
			return{
				updateTitle:'',
				userId:'',
				userName:'',
				sort:'',
				tableData:[],
				completedNum:'',
				pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods:{
			getParams() {
				this.userId = this.$route.params.userId;
				this.courseId = this.$route.params.courseId;
				this.userName = this.$route.params.userName;
				this.updateTitle = this.$route.params.updateTitle;
				this.dataId = this.$route.params.dataId;
				console.log('recordedData:',this.$route.params);
			},
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/kcCourse/sudentKcCourseVideoList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						page:this.currentpage,
						num:this.pagesize,
						userId:this.userId,
						courseId:this.courseId
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1;
								let mss = this.tableData[i].completedNum;
								var m = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
								this.tableData[i].completedNum=m;
							};
						}
					}
				});
			},
			reBack(){
				this.$router.push({
					name:'soTeacher',
					params:{
						userid:this.userId,
						nickname:this.userName,
						dataId:this.dataId
					}
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getPageSearch(){
				this.currentpage=1;
				this.getTableList();
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted(){
			this.getParams();
			if(this.userId==null||this.userName==null||this.updateTitle==null){
				this.$store.commit('GET_USERRECORDEDDATA');
				var s =this.$store.state.recordedData;
				this.userId=s.userId;
				this.userName=s.userName;
				this.updateTitle=s.updateTitle;
				this.courseId = s.courseId;
				this.dataId = s.dataId;
			};
			this.getTableList();
			window.addEventListener("beforeunload",()=>{
				s={
					userId:this.userId,
					userName:this.userName,
					updateTitle:this.updateTitle,
					courseId:this.courseId,
					dataId:this.dataId
				};
				this.$store.commit('SET_USERRECORDEDDATA', s);
			});
		}
	}
</script>